<template>
  <div class="header-container">
    <!--回到顶部-->
    <div id="top"></div>

    <div class="box">
      <div class="header-box">

        <!--   LOGO   -->
        <div class="left-box" @click="go(`home`)">
          <div>
            <svg class="icon" aria-hidden="true" style="width:60px;height:60px;margin-top:5px">
              <use xlink:href="#icon-java"></use>
            </svg>
          </div>
          <div>
            <img src="@/assets/header/name.png" style="width:140px;margin-top:6px;">
          </div>
        </div>

        <!-- 当前面板 -->
        <div class="center-box">
          <div ref="home"
               :class="{'tab':true,'now':choiceId=='home','hover':hoverId=='home'}"
               style="margin-left: 60px"
               @mouseenter="hover(`home`)"
               @mouseleave="over(`home`)"
               @click="go(`home`)">
            首页
          </div>

          <div
              ref="course"
              :class="{'tab':true,'now':choiceId=='course','hover':hoverId=='course'}"
              @mouseenter="hover(`course`)"
              @mouseleave="over(`course`)"
              @click="go(`course`)">
            课程
          </div>

          <!--        <div
                      ref="software"
                      :class="{'tab':true,'now':choiceId=='software','hover':hoverId=='software'}"
                      @mouseenter="hover(`software`)"
                      @mouseleave="over(`software`)"
                      @click="go(`software`)">
                    软件
                  </div>

                  <div
                      ref="shop"
                      :class="{'tab':true,'now':choiceId=='shop','hover':hoverId=='shop'}"
                      @mouseenter="hover(`shop`)"
                      @mouseleave="over(`shop`)"
                      @click="go(`shop`)">
                    商城
                  </div>-->

          <div
              ref="nav"
              :class="{'tab':true,'now':choiceId=='nav','hover':hoverId=='nav'}"
              @mouseenter="hover(`nav`)"
              @mouseleave="over(`nav`)"
              @click="go(`nav`)">
            导航
          </div>
        </div>

        <!-- 搜索登录 -->
        <div class="right-box">
          <div class="search">
            <Search></Search>
          </div>
          <div class="login">
            <Login></Login>
          </div>
        </div>

        <!--      <div class="name">
                {{userName}}
              </div>-->
      </div>
    </div>

  </div>
</template>

<script>
import Search from "@/components/header/Search"
import Login from "@/components/header/Login"

export default {
  //组件名称
  name: "Header",
  //组件注册
  components: {Search, Login},
  //数据驱动
  data() {
    return {
      hoverId: ""
    }
  },
  //计算属性
  computed: {
    userName() {
      return this.$store.getters.getUserInfo.userName
    },
    choiceId() {
      return this.$store.getters.getCurrentTab
    }
  },
  //数据监听
  watch: {},
  //方法
  methods: {
    //当前面板
    go(currentTab) {
      this.$store.dispatch('asyncSetCurrentTab', currentTab)

      switch (currentTab) {
        case "home":
          this.$router.push("/")
              .catch((error) => {

              })
          break;
        case "course":
          this.$router.push("/course")
          break;
        case "nav":
          this.$router.push("/navigation")
          break;
          /*  case "software":
            this.$router.push("/software")
            break;
                  case "shop":
                      this.$router.push("/shop")
                      break;*/
      }
    },
    //鼠标移入
    hover(tab) {
      this.hoverId = tab;
    },
    //鼠标移出
    over() {
      this.hoverId = ""
    }
  },
  //钩子函数
  mounted() {

  }
}
</script>

<style lang="less" scoped>
.header-container {
  box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.1);

  .box {
    width: 100%;
    background-color: #FFF;
    //todo 导航栏固定
    position: fixed !important;
    z-index: 999;
    box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.1);
  }

  .header-box {
    width: 1200px;
    height: 70px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    cursor: pointer;
    left: calc(50% - 600px);

    div {
    }

    /* logo */

    .left-box {
      width: 200px;
      display: flex;
    }

    /*  */

    .center-box {
      flex-grow: 1;
      display: flex;

      div {
        margin-left: 10px;
      }

      .tab {
        cursor: pointer;
        width: 80px;
        font-size: 18px;
        font-weight: lighter;
        line-height: 70px;
        text-align: center;
      }

      .now {
        font-size: 20px !important;;
        font-weight: 600 !important;;
        color: #000000 !important;;
      }

      .hover {
        background-color: #33aff3;
        color: #FFFFFF;
        border-radius: 2px;
        font-size: 20px;
        font-weight: bolder;
      }
    }

    /* 搜索框和登录 */

    .right-box {
      flex-grow: 1;
      display: flex;
      justify-content: flex-end;

      .login {
        width: 120px;
      }
    }

    .name {
      line-height: 70px;
      font-size: 18px;
    }
  }
}

/deep/ .drop-item {
  width: 100px;
  //margin: -4px -18px -8px -18px;
  display: flex;

  .icon {
    width: 30px;
    height: 24px;
  }

  .text {
    width: 60px;
    text-align: center;
    height: 24px;
    line-height: 24px;
  }
}
</style>